<template>
  <div class="form-container">
    <h2>数据查询</h2>
    <div class="form-group-row">
      <div class="form-group form-group-rtuCode">
        <label>设备号</label>
        <!-- 添加 @keyup.enter 事件监听器 -->
        <input type="text" v-model="config.rtuCode" placeholder="12位设备号" @blur="handleRtuCodeBlur" @keyup.enter="handleSubmit">
      </div>
      <div class="form-group form-group-paraID">
        <label>paraID</label>
        <!-- 添加 @keyup.enter 事件监听器 -->
        <input type="text" v-model="config.paraID" placeholder="32位paraid" @blur="handleParaIDBlur" ref="paraIDInput" @keyup.enter="handleSubmit">
      </div>
      <div class="form-group form-group-startTm">
        <label>开始时间</label>
        <!-- 添加 @keyup.enter 事件监听器 -->
        <input type="text" v-model="config.startTm" @keyup.enter="handleSubmit">
      </div>
      <div class="form-group form-group-endTm">
        <label>结束时间</label>
        <!-- 添加 @keyup.enter 事件监听器 -->
        <input type="text" v-model="config.endTm" @keyup.enter="handleSubmit">
      </div>
    </div>
    <div class="form-group">
      <button @click="handleSubmit" class="submit-btn">查询</button>
    </div>
    <!-- 添加响应数据展示区域 -->
    <div v-if="responseData && responseData.length > 0" class="response-data">
      <h3>响应数据</h3>
      <table>
        <thead>
          <tr>
            <th>设备号</th>
            <th>paraID</th>
            <th>采集值</th>
            <th>采集时间</th>
            <th>系统时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in responseData" :key="item.id">
            <td>{{ item.rtuCode }}</td>
            <td>{{ item.paraID }}</td>
            <td>{{ item.paraValue }}</td>
            <td>{{ item.collectTime }}</td>
            <td>{{ item.systemTime }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue';
import axios from 'axios';

const config = reactive({ 
  rtuCode: '', 
  paraID: '', 
  startTm: new Date(new Date().getTime() - 7*24 * 60 * 60 * 1000).toISOString().slice(0, 19).replace('T', ' '), 
  endTm: new Date().toISOString().slice(0, 19).replace('T',' ')
});

const paraIDInput = ref(null);
// 新增响应数据响应式变量
const responseData = ref(null);

const handleSubmit = async () => {
  try {
    let typeValue;
    if (config.paraID) {
      typeValue = "paraID";
    } else if (config.rtuCode) {
      typeValue = "rtuCode";
    } else {
      alert("设备号和paraID必须填一个");
      return;
    }
    const response = await axios.post('http://192.168.0.109:8081/api/dataSearch', {
      "type": typeValue,
      "rtuCode": config.rtuCode,
      "paraID": config.paraID,
      "startTm": config.startTm,
      "endTm": config.endTm
    });
    console.log('响应数据:', response);
    // 将响应数据赋值给响应式变量，并处理为数组形式
    if (Array.isArray(response.data.data)) {
      responseData.value = response.data.data;
    } else {
      responseData.value = [response.data.data];
    }
  } catch (error) {
    console.error('请求错误:', error);
  }
};

const handleRtuCodeBlur = () => {
  if (config.rtuCode.length > 12) {
    config.rtuCode = config.rtuCode.slice(-12);
  } else if (config.rtuCode.length < 12 && config.rtuCode.length > 0) {
    config.rtuCode = '0'.repeat(12 - config.rtuCode.length) + config.rtuCode;
  }
};

const handleParaIDBlur = () => {
  if (config.paraID && config.paraID.length !== 32) {
    alert("paraid不填或者必须为32位");
    // 确保alert弹窗关闭后执行
    setTimeout(() => {
      paraIDInput.value.focus();
    }, 0);
  }
};
</script>

<style scoped src="../assets/content1.css"></style>